<template>
  <el-container class="home-content">
    <el-header class="main-header">
      <el-collapse v-model="collapseActive">
        <el-collapse-item title="高级筛选" class="collapse-title" name="collapseHeader">
          <el-button type="primary" @click="refreshSimpleArithmeticProblems('+')">加法运算</el-button>
          <el-button type="primary" @click="refreshSimpleArithmeticProblems('-')">减法运算</el-button>
          <el-button type="primary" @click="refreshSimpleArithmeticProblems('*')">乘法运算</el-button>
          <el-button type="primary" @click="refreshSimpleArithmeticProblems('/')">除法运算</el-button>
          <el-button type="primary" @click="refreshSimpleArithmeticProblems('0')">混合运算</el-button>
        </el-collapse-item>
      </el-collapse>
    </el-header>
    <el-main class="main-content">
      <ul>
        <li v-for="problem in randomDataArr" :key="problem">
          <SimgleMathProblem :data={problem} :show={showAnswer}></SimgleMathProblem>
        </li>
      </ul>
      <!-- <el-button type="primary" @click="showAllAnswers">查看答案</el-button> -->
    </el-main>
  </el-container>
</template>

<script>
import { onMounted, ref } from 'vue'
import SimgleMathProblem from '@/components/SimgleMathProblem.vue';
import { getSimpleArithmeticProblems } from '../api/SimpleArithmeticApi'

export default {
  name: 'edu-number',
  components: {
    SimgleMathProblem
  },
  setup() {
    const collapseActive = ref('collapseHeader');
    let randomDataArr = ref([]);
    let maxNumber = 100;
    let showAnswer = false;

    onMounted(() => {
      refreshSimpleArithmeticProblems('0', 100);
    });

    const showAllAnswers = () => {
      showAnswer = !showAnswer;
    };

    const refreshSimpleArithmeticProblems = (type) => {
      getSimpleArithmeticProblems(type, maxNumber).then(res => {
        if(res.status === 200) {
          randomDataArr.length = 0;
          randomDataArr.value = res.data;
        }
      });
    }

    return { 
      collapseActive,
      randomDataArr,
      showAnswer,
      showAllAnswers,
      refreshSimpleArithmeticProblems
    }
  }

}
</script>

<style>

</style>